import './RiskLevelListPeriods.scss'
import { Button } from 'antd'
import { useState, useRef } from 'react'
import { ProTable } from '@ant-design/pro-components'
import { useMount, useRequest, useSize } from 'ahooks'

import { Http } from '../../../Api'

import { commonTableList, BuiltInData } from '../Common/common'

export const RiskLevelListPeriods = () => {
    const actionRef = useRef()
    const formRef = useRef()
    const TableBox = useRef()
    const size = useSize(TableBox)
    const ClientData = JSON.parse(window.localStorage.getItem('ClientData'))
    const [Active, setActive] = useState('')
    const [BranchCompany, setBranchCompany] = useState([])
    const [Columns, setColumns] = useState()
    const [SummaryList, setSummaryList] = useState({ 中标金额: '0.00', 总体收入: '0.00', 本年收入: '0.00' })
    const [IndexNumber, setIndexNumber] = useState(1)
    const [SizeNumber, setSizeNumber] = useState(10)

    const { runAsync: getBranchCompany } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log(res)
            setActive(res.list[0].uuid)
            setBranchCompany(res.list)
        },
    })

    const { runAsync: getData } = useRequest(Http, { manual: true })
    const { runAsync: getExcel } = useRequest(Http, { manual: true })

    const columns = async () => [
        commonTableList.uuid,
        { ...commonTableList.tableName, width: 320, hideInSearch: true },
        {
            dataIndex: '低风险',
            title: '低风险',
            valueType: 'input',
            hideInSearch: true,
            width: 120,
        },
        {
            dataIndex: '一般风险',
            title: '一般风险',
            valueType: 'input',
            hideInSearch: true,
            width: 120,
        },
        {
            dataIndex: '较大风险',
            title: '较大风险',
            valueType: 'input',
            hideInSearch: true,
            width: 120,
        },
        {
            dataIndex: '重大风险',
            title: '重大风险',
            valueType: 'input',
            hideInSearch: true,
            width: 120,
        },
        commonTableList.BeginDate,
        commonTableList.EndDate,
    ]

    const onActive = e => {
        setActive(e)
        actionRef.current.reload()
    }

    useMount(async () => {
        getBranchCompany({ url: 'getRiskGetCompanyRiskStat' })
        setColumns(await columns())
    })

    const getRequest = async e => {
        const { current, ...item } = e
        const data = { pageIndex: current, ...item, OrganizationUuid: Active }
        return getData({ url: 'getRiskGetRiskStatList', data }).then(res => {
            return { data: res.list, total: res.total, success: true }
        })
    }

    const onExcel = () => {
        const data = { parentOrganizationUuid: Active, ...formRef.current.getFieldsValue() }
        getExcel({ url: 'getEngineeringOrganizationsExcel', data })
    }

    return (
        <div className="RiskLevelListPeriods">
            <div className="Left">
                {BranchCompany.map(({ uuid, tableName, count }) => (
                    <div key={uuid} className={Active === uuid ? 'active' : ''} onClick={() => onActive(uuid)}>
                        <div>{tableName}</div>
                        <div>{count}</div>
                    </div>
                ))}
            </div>
            <div className="Right" ref={TableBox}>
                {size && Columns && (
                    <ProTable
                        rowKey="uuid"
                        formRef={formRef}
                        actionRef={actionRef}
                        columns={Columns}
                        request={e => getRequest(e)}
                        pagination={{
                            pageSize: SizeNumber,
                            showSizeChanger: true,
                            onChange: (e, a) => {
                                setIndexNumber(e)
                                setSizeNumber(a)
                            },
                        }}
                        scroll={(() => {
                            let { width: x, height } = size
                            let y = height - 265
                            return { x, y }
                        })()}
                    />
                )}
            </div>
        </div>
    )
}
